<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Modal 模态框 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col">
            <div class="alert alert-light alert-elevate fade show" role="alert">
                <div class="alert-icon"><i class="flaticon-warning e-font-brand"></i></div>
                <div class="alert-text">
                    基于<code>Bootstrap Modal</code>，可前往<a class="e-link e-font-bold"
                                                         href="https://getbootstrap.com/docs/4.3/components/modal/"
                                                         target="_blank">查看详细API</a>
                </div>
            </div>
        </div>
    </div>

    <!--begin::Portlet-->
    <div class="card">
        <div class="card-head">
            <div class="card-head-label">
                <h3 class="card-head-title">
                    示例
                </h3>
            </div>
        </div>
        <div class="card-body">
            <table class="table table-bordered">
                <tr>
                    <td style="width: 30%">基本</td>
                    <td>
                        <button type="button" class="btn btn-brand btn-sm" data-toggle="modal" data-target="#modal-1">
                            打开模态框
                        </button>
                    </td>
                </tr>
                <tr>
                    <td style="width: 30%">长内容</td>
                    <td>
                        <button type="button" class="btn btn-brand btn-sm" data-toggle="modal" data-target="#modal-2">
                            打开模态框
                        </button>
                    </td>
                </tr>
                <tr>
                    <td style="width: 30%">带滚动条</td>
                    <td>
                        <button type="button" class="btn btn-brand btn-sm" data-toggle="modal" data-target="#modal-1_2">
                            打开模态框
                        </button>
                    </td>
                </tr>
                <tr>
                    <td style="width: 30%">Tooltips 和 popovers</td>
                    <td>
                        <button type="button" class="btn btn-brand btn-sm" data-toggle="modal" data-target="#modal-3">
                            打开模态框
                        </button>
                    </td>
                </tr>
                <tr>
                    <td style="width: 30%">大模态框</td>
                    <td>
                        <button type="button" class="btn btn-brand btn-sm" data-toggle="modal" data-target="#modal-4">
                            打开模态框
                        </button>
                    </td>
                </tr>
                <tr>
                    <td style="width: 30%">小模态框</td>
                    <td>
                        <button type="button" class="btn btn-brand btn-sm" data-toggle="modal" data-target="#modal-5">
                            打开模态框
                        </button>
                    </td>
                </tr>
                <tr>
                    <td style="width: 30%">水平垂直居中</td>
                    <td>
                        <button type="button" class="btn btn-brand btn-sm" data-toggle="modal" data-target="#modal-6">
                            打开模态框
                        </button>
                    </td>
                </tr>
                <tr>
                    <td style="width: 30%">在左侧打开</td>
                    <td>
                        <button type="button" class="btn btn-brand btn-sm" data-toggle="modal" data-target="#modal-7">
                            打开模态框
                        </button>
                    </td>
                </tr>
                <tr>
                    <td style="width: 30%">在右侧打开</td>
                    <td>
                        <button type="button" class="btn btn-brand btn-sm" data-toggle="modal" data-target="#modal-8">
                            打开模态框
                        </button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <!--end::Portlet-->

    <!--begin::Modal-->
    <div class="modal fade" id="modal-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">标题</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>

                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-brand">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!--end::Modal-->

    <!--begin::Modal-->
    <div class="modal fade" id="modal-1_2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">标题</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <div class="e-scroll" data-scroll="true" data-height="200">
                        <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>

                        <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                            的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                        <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>

                        <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                            的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                        <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>

                        <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                            的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-brand">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!--end::Modal-->

    <!--begin::Modal-->
    <div class="modal fade" id="modal-2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">标题</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>

                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>

                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>

                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>

                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>

                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>

                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>

                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-brand">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!--end::Modal-->

    <!--begin::Modal-->
    <div class="modal fade" id="modal-3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">标题</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <h5>Popover</h5>
                    <p>
                        <a href="#" role="button" data-toggle="e-popover" class="btn btn-default popover-test"
                               title="Bootstrap" data-content="Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。">Popover</a>
                    </p>
                    <hr>
                    <h5>Tooltips</h5>
                    <p>
                        <a href="#" class="tooltip-test" data-toggle="e-tooltip" title="Bootstrap">Tooltips</a>
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-brand">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!--end::Modal-->

    <!--begin::Modal-->
    <div class="modal fade" id="modal-4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">写消息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="form-control-label">主题：</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="form-control-label">内容：</label>
                            <textarea class="form-control" id="message-text"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-brand">发送信息</button>
                </div>
            </div>
        </div>
    </div>
    <!--end::Modal-->

    <!--begin::Modal-->
    <div class="modal fade" id="modal-5" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">写消息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="recipient-name" class="form-control-label">主题：</label>
                            <input type="text" class="form-control" id="recipient-name">
                        </div>
                        <div class="form-group">
                            <label for="message-text" class="form-control-label">内容：</label>
                            <textarea class="form-control" id="message-text"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-brand">发送信息</button>
                </div>
            </div>
        </div>
    </div>
    <!--end::Modal-->

    <!--begin::Modal-->
    <div class="modal fade" id="modal-6" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">标题</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>

                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-brand">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!--end::Modal-->

    <!--begin::Modal-->
    <div class="modal modal-stick-to-bottom fade" id="modal-7" role="dialog" data-backdrop="false">
        <div class="modal-dialog modal-sm modal-sidebar" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">标题</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>

                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-brand">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!--end::Modal-->

    <!--begin::Modal-->
    <div class="modal modal-stick-to-bottom fade" id="modal-8" role="dialog" data-backdrop="false">
        <div class="modal-dialog modal-sm modal-sidebar modal-sidebar--right" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">标题</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <p>Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>

                    <p>Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery
                        的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-brand">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!--end::Modal-->
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>